<template>
  <div>
    <el-dialog :fullscreen="fullscreen" append-to-body :visible.sync="isShow" width="700px" :show-close="false" :before-close="parentCloseEvent" top="3%">
        <el-row slot="title">
            <el-col :span="10" style="padding-top: 5px">
                <span>活动管理</span>
            </el-col>
            <el-col :span="2" :offset="11">
                <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
                <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
            </el-col>
            <el-col :span="1">
                <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
            </el-col>
        </el-row>
        <!-- 工具栏 -->
        <section class="filter-container">
            <el-button class="filter-item" type="primary" @click="addData">添加</el-button>
        </section>
        <!-- 表格 -->
        <el-table :data="tableList" ref='tables' v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column align="center" width="90">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="t_active[scope.row.active_status - 1].type">{{t_active[scope.row.active_status - 1].name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" width="30">
                <template slot-scope="scope">
                    <i class="iconfont ali-zhiding" v-show="scope.row.top_status == 1"></i>
                </template>
            </el-table-column>
            <el-table-column align="center" label="活动主题" prop="active_title" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="活动时间" width="150px" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.active_start_time}}</span><br/>
                    <span>{{scope.row.active_end_time}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="地点" prop="active_address" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="开始报名时间" width="150px" prop="signup_start_time"></el-table-column>
            <el-table-column align="center" label="报名人数">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="alreadySign(scope.row)">{{scope.row.readyapply_nums}} / {{scope.row.allow_num}}</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" label="浏览量" prop="browse_nums"></el-table-column>
            <el-table-column align="center" label="报名范围" width="100px" show-overflow-tooltip>
                <template slot-scope="scope">
                    <i v-for="item in scope.row.activeRanges" :key="item.id">
                        <span>{{item.organization_name}}</span>/
                    </i>
                </template>
            </el-table-column>
            <el-table-column align="center" label="发布时间" prop="create_time"></el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                 <el-tag size="mini" type="success">{{t_status[scope.row.close_status]}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="列表链接">
            <template slot-scope="scope">
                <el-button v-clipboard:copy="'https://cloud.anyolife.com/ActivityHome'" v-clipboard:success="onCopy"
                 v-clipboard:error="onError" type="text">复制链接</el-button>
                </template>
            </el-table-column>
    </el-table>
        <!-- 分页 -->
        <section>
        <so-pagination :query="listQuery" @initList="initList"/>
        </section>
    </el-dialog>
  </div>
</template>
<script>
import SoPagination from "@/components/SoPagination";
import { active_list} from "@/api/active";
import { actityManager_save, actityManager_saveAll, actityManager_listAll } from "@/api/actityManager";
import { status_opt, t_active, t_status, toolData } from "../activity";
import { waitingTime } from '@/utils'

export default {
    components: {
        SoPagination
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            listQuery: { start: 1, limit: 10, total: 0, current: 1 },  //最后一个start 是由 current 改过来的
            tableList: [],
            loading: false,
            multipleSelection: [],
            t_active: t_active,
            t_status: t_status,
            status_opt: status_opt,
            fullscreen: false
        }
    },
    methods: {
        onCopy: function() {
            this.$message({
            type: "success",
            message: "复制成功"
            });
        },
        onError: function() {
            this.$message.error("复制失败");
        },
        async addData() {
            this.$emit("editActivity", this.multipleSelection);
            if(this.multipleSelection.length === 0){
                this.$message.warning("请先选择需要添加项");
                return;
            }
            let multipleSelection = []
            this.multipleSelection.forEach(element => {
                multipleSelection.push({
                    active_id: element.id,
                    list_url: "https://cloud.anyolife.com/ActivityHome"
                })
            }); 
            this.loading = true;
            let params = {
                array: JSON.stringify(multipleSelection), 
                company_id: localStorage.getItem("companyId")-0,
                pageSet_id: sessionStorage.getItem("pageSetRow_Id") - 0,
                organization_id: sessionStorage.getItem("organization_id") - 0, 
            };
            const {data} = await actityManager_saveAll(params);
            this.loading = false;
            if (data.status === 100) {
                this.$message.success("添加成功");
                this.initList();
            }
        },
        handleSelectionChange(e) {
            this.multipleSelection = e;
        },
        parentCloseEvent() {
            this.$emit('closeTemp');
        },
        async getActivityListAll(){// 根据公司主键查询已经 保存的数据列表
            let {data} = await actityManager_listAll({
                company_id: localStorage.getItem("companyId") - 0,  
                pageSet_id: sessionStorage.getItem("pageSetRow_Id") - 0,
                organization_id: sessionStorage.getItem("organization_id") - 0,  
            });
            if(data.status === 100){
                return data.data.rows;
            }
            return []
        },
        async fmtDiffList(activity, activeListAll){//筛选掉已被保存的数据列表
            if(activity.length == 0) return activeListAll;
            for (let i = 0; i < activeListAll.length; i++) {
                const row = activeListAll[i];
                for (let j = 0; j < activity.length; j++) {
                    const item = activity[j];
                    if(item.active_id == row.id){
                        this.$refs.tables.toggleRowSelection(this.tableList[i],true);
                        continue;
                    }
                }
            }
        },
        async initList(){
            this.loading = true;
            const query = {...this.listQuery, company_id: localStorage.getItem("companyId") - 0 };
            let {data} = await active_list(query);
            this.loading = false;
            if(data.status === 100){
                let activityList = await this.getActivityListAll();
                this.tableList = data.data.rows;
                await waitingTime(0);
                await this.fmtDiffList(activityList, data.data.rows); 
            }
        }
    },
};
</script>
